@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* -------------------------------- 

Primary style

-------------------------------- */

*, *::after, *::before {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font: {
		size: 1.6rem;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-1;
	background-color: $color-5;
}

a {
	color: $color-2;
	text-decoration: none;
}

button {
	cursor: pointer;
	border: none;
	background-color: transparent;
	outline: none;
	font-size: 1.6rem;
}

/* -------------------------------- 

Images block

-------------------------------- */

.cd-image-block {
	position: relative;

	&::before {
		/* this is the layer used to cover the .cd-image-block when the content block becomes visible - mobile only */
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba($color-1, .6);
		
		opacity: 0;
		visibility: hidden;
		@include transition(opacity .3s 0s, visibility 0s .3s);
	}

	&.content-block-is-visible::before  {
		opacity: 1;
		visibility: visible;
		@include transition(opacity .3s 0s, visibility 0s 0s);
	}

	@include MQ(M) {
		
		&::before {
			display: none;
		}
	}
}

.cd-images-list {

	&::before {
		/* never visible - this is used in jQuery to check the current MQ */
		content: 'mobile';
		display: none;
	}

	> li {
		height: 250px;
		background: $color-3 url(../img/img-1.jpg) no-repeat center center;
		background-size: cover;

		&:nth-of-type(2) {
			background: $color-1 url(../img/img-2.jpg) no-repeat center center;
			background-size: cover;
		}

		&:nth-of-type(3) {
			background: $color-2 url(../img/img-3.jpg) no-repeat center center;
			background-size: cover;
		}

		&:nth-of-type(4) {
			background: $color-4 url(../img/img-4.jpg) no-repeat center center;
			background-size: cover;
		}
	}
	
	> li > a {
		/* used to vertically align the h2 child -  mobile version only */
		display: table;

		height: 100%;
		width: 100%;
	}

	h2 {
		/* used to vertically align h2 -  mobile version only */
		display: table-cell;
		vertical-align: middle;

		text-align: center;
		font-size: 3rem;
		color: $color-5;
		font-weight: 700;
		@include font-smoothing;
	}

	@include MQ(M) {

		&::before {
			/* never visible - this is used in jQuery to check the current MQ */
			content: 'desktop';
		}

		> li > a {
			display: block;
			padding: 4em 3em;

			cursor: default;
			pointer-events: none;
		}

		h2 {
			font-size: 5.5rem;
			text-align: left;
		}
	}
}

/* -------------------------------- 

Content block

-------------------------------- */

.cd-content-block {
	/* move the block outside the viewport (to the right) - mobile only */
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	height: 100%;
	@include transform(translateX(100%));
	@include transition(transform .3s);

	&.is-visible {
		@include transform(translateX(0));
	}

	> ul {
		height: 100%;
	}

	> ul > li {
		position: absolute;
		height: 100%;
		padding: 2em;
		overflow-y: scroll;
		background-color: $color-5;
		opacity: 0;
		visibility: hidden;

		&.is-selected {
			/* this is the selected content */
			position: relative;
			opacity: 1;
			visibility: visible;
			-webkit-overflow-scrolling: touch;
		}
	}

	h2 {
		line-height: 1.2;
		font-weight: 700;
		font-size: 2.3rem;
		margin-bottom: 1em;
	}

	p {
		margin-bottom: 2em;
		line-height: 1.6;
		color: tint($color-1, 40%);
	}

	.cd-close {
		/* 'X' icon to close the content block -  mobile only */
		position: fixed;
		top: 0;
		right: 0;
		height: 44px;
		width: 44px;

		/* image replacement */
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
		color: transparent;
		
		@include transform(scale(0));
		@include transition(transform .2s);

		&::after, &::before {
			/* these are the 2 lines of the 'X' icon */
			content: '';
			position: absolute;
			left: 50%;
    		top: 50%;
			width: 2px;
			height: 24px;
			background-color: $color-1;
			
			/* Force Hardware Acceleration */
    		@include backface-visibility(hidden);
    		@include transform(translateZ(0));
		}

		&::after {
			@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
		}

		&::before {
			@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
		}

		&.is-scaled-up {
			@include transform(scale(1));

			.no-touch &:hover {
				@include transform(scale(1.2));
			}
		}
	}

	@include MQ(M) {
		/* reset style */
		position: static;
		@include transform(translateX(0));

		> ul > li {
			/* reset style */
			opacity: 1;
			visibility: visible;

			padding: 4em 3em;

			&.overflow-hidden {
				/* this class is used during the animation (slider change) to hide the scrolling bar */
				overflow: hidden;
			}
		}

		h2 {
			font-size: 3rem;
		}

		.cd-close {
			display: none;
		}
	}
}

/* ---------------------------------------------- 

Desktop slider - both image and content blocks

---------------------------------------------- */

@include MQ(M) {

	.cd-image-block,
	.cd-content-block {
		/* slider style - desktop version only */
		@include column(.5);
		height: 100vh;
		overflow: hidden;

		> ul {
			position: relative;
			height: 100%;	
		}

		> ul > li {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			
			/* Force Hardware Acceleration */
			@include transform(translateZ(0));
			@include backface-visibility(hidden);
			will-change: transform;
			
			/* by default, the items are moved to the right - relative to their parent elements */
			@include transform(translateX(100%));
			@include transition(transform .5s);

			&.is-selected {
				/* this is the visible item */
				position: absolute;
				@include transform(translateX(0));
			}

			&.move-left {
				/* this is the item hidden on the left */
				@include transform(translateX(-100%));
			}
		}
	}
}

/* -------------------------------- 

Slider navigation

-------------------------------- */

.block-navigation {
	/* this is the slider navigation - desktop version only */
	display: none;

	@include MQ(M) {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 50%;
		@include clearfix;

		li {
			width: 50%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background-color: rgba(#000, .5);
			@include transition(background .2s);

			&:hover {
				background-color: rgba(#000, .7);
			}
		}

		li:first-of-type {
			float: left;
		}

		li:last-of-type {
			float: right;
		}

		button {
			display: block;
			height: 100%;
			width: 100%;
			color: $color-5;
			@include font-smoothing;

			&.inactive {
				opacity: .3;
				cursor: not-allowed;
			}
		}
	}	
} 

/* -------------------------------- 

Javascript disabled

-------------------------------- */
@include MQ(M) {
	.no-js .cd-content-block {
		display: none;
	}

	.no-js .cd-image-block {
		width: 100%;
		overflow: visible;
	}

	.no-js .cd-images-list {
		@include clearfix;
	}

	.no-js .cd-images-list > li {
		position: static;
		@include column(.5);
		height: 400px;
		@include transform(translateX(0));

		&.is-selected {
			position: static;
		}
	}

	.no-js .cd-images-list > li > a {
		cursor: pointer;
		pointer-events: auto;
	}

	.no-js .block-navigation {
		display: none;
	}
}